<template>
	<div class="tutorial" :class="containerClass" @click.stop.prevent="next" v-if="visible">
		<div class="content">
		    <div class="target" :style="{'left':targetLeft,'top':targetTop}"></div>
		    <div class="tips" :style="{'left':tipsLeft,'top':tipsTop}">
		    	<template v-for="item in imgList">
		        	<img v-bind:src="item.imgSrc" class="img-responsive" v-show="item.type === guideType">
		        </template>
		    </div>
		    <div class="shield"></div>
		</div>
	</div>
</template>

<script>
import Constant from 'common/constant'
import store from 'store/store'
import LocalDAO from 'common/localDAO'

const baseUrl = 'https://dl.app.gtja.com/nrng/shareimages/tutorial/';

const ClassEnum={
	menu: 'tutorial-menu',
	rockmansShow: 'tutorial-rockmans-show',
	search:'tutorial-search',
	jxng:'tutorial-jxng',
	lhfp:'tutorial-lhfp',
	gamesOfficial:'tutorial-games-official',
  	rockmanArrow:'tutorial-rockman-arrow',
  	rockmanHead:'tutorial-rockman-head',
  	rockmanTab:'tutorial-rockman-tab',
  	rockStockTab:'tutorial-rockstock-tab',
  	rockStockSelfStock:'tutorial-rockstock-selfstock',
  	rockStockFooterTab:'tutorial-rockstock-footertab',
  	reasonMore:'tutorial-reason-more',
  	userHead:'tutorial-user-head',
  	myTrade:'tutorial-my-trade',
  	jyb:'tutorial-jyb',
  	medalsOwned:'tutorial-medals-owned',
  	settingSubscriptionPrice:'tutorial-setting-subscription-price',
  	relatedInformation:'tutorial-related-information',
  	indexBuildGame:'tutorial-index-build-game',
  	indexGameItem:'tutorial-index-game-item',
  	indexGameFooter:'tutorial-index-game-footer'
}

let SerialsEnum = {
	serialIndex : [{
			imgSrc:baseUrl + '01.png', // 主菜单
			type:Constant.tutorial.MENU
		},{
			imgSrc:baseUrl + '02.png', // 牛人秀
			type:Constant.tutorial.ROCKMANS_SHOW
		},{
	  		imgSrc:baseUrl + '03.png', // 搜索
	  		type:Constant.tutorial.SEARCH
		},{
	  		imgSrc:baseUrl + '04.png', // 精选牛股
	  		type:Constant.tutorial.JXNG
		},{
	  		imgSrc:baseUrl + '05.png', // 老何复盘
	  		type:Constant.tutorial.LHFP
		},{
	  		imgSrc:baseUrl + '06.png', // 官方比赛
	  		type:Constant.tutorial.GAMES_OFFICIAL
		}],

  	serialRockman: [{
	  		imgSrc:baseUrl + '12.png', // 牛人列表点击展开
	  		type:Constant.tutorial.ROCKMAN_ARROW
		},{
	  		imgSrc:baseUrl + '13.png', // 牛人点击头指引头像
	  		type:Constant.tutorial.ROCKMAN_HEAD
		},{
	  		imgSrc:baseUrl + '14.png', // 切换牛人列表
	  		type:Constant.tutorial.ROCKMAN_TAB
		}],

  	serialRockStock :[{
	  		imgSrc:baseUrl + '09.png', // 切换牛股列表
	  		type:Constant.tutorial.ROCKSTOCK_TAB
		},{
	  		imgSrc:baseUrl + '10.png', // 添加自选股
	  		type:Constant.tutorial.ROCKSTOCK_SELFSTOCK
		},{
	  		imgSrc:baseUrl + '11.png', // 切换牛股和牛组合
	  		type:Constant.tutorial.ROCKSTOCK_FOOTERTAB
		}],

  	serialReasonMore : [{
	  		imgSrc:baseUrl + '18.png', // 交易委托更多原因
	  		type:Constant.tutorial.REASON_MORE
		}],

  	serialLoginIndex : [{
	  		imgSrc:baseUrl + '07.png', // 用户头像
	  		type:Constant.tutorial.USER_HEAD
		},{
	  		imgSrc:baseUrl + '08.png', // 我的交易按钮
	  		type:Constant.tutorial.MY_TRADE
		}],

  	serialMyHome : [{
	  		imgSrc:baseUrl + '19.png', // 君元宝数
	  		type:Constant.tutorial.JYB
		},{
	  		imgSrc:baseUrl + '20.png', // 已获取勋章区域
	  		type:Constant.tutorial.MEDALS_OWNED
		},{
	  		imgSrc:baseUrl + '21.png', // 设置订阅价格
	  		type:Constant.tutorial.SETTING_SUBSCRIPTION_PRICE
		},{
	  		imgSrc:baseUrl + '22.png', // 我的相关信息
	  		type:Constant.tutorial.RELATED_INFORMATION
		}],

  	serialGame : [{
	  		imgSrc:baseUrl + '15.png',    //比赛：主页面单个比赛
	  		type:Constant.tutorial.INDEX_BUILD_GAME
		},{
	  		imgSrc:baseUrl + '16.png',  //比赛：主页面创建比赛
	  		type:Constant.tutorial.INDEX_GAME_ITEM
		},{
	  		imgSrc:baseUrl + '17.png',    //比赛：主页面所有比赛和我的比赛区域
	  		type:Constant.tutorial.INDEX_GAME_FOOTER
		}]
}

export default {
	data(){
		return {
			guideType:'',
			containerClass:'',
			imgList:[],
			visible:false,
			targetTop:'',
			targetLeft:'',
			tipsTop:'',
			tipsLeft:''
		}
	},
	computed: {
      guideParam() {
        return store.state.guideParam
      }
    },
    watch: {
	   guideParam: {
	      handler: function (val, oldVal) {
	      	let vm = this;

	      	vm.visibleCheck();
	      },
	      deep: true
	   }
    },
	methods:{
		setGuideInfo(){
			let vm = this,
				top,
				left;
			
            vm.targetTop = '';
            vm.targetLeft = '';
            vm.tipsTop = '';
            vm.tipsLeft = '';

			switch(vm.guideType){
				case Constant.tutorial.MENU:// 主菜单
					vm.containerClass = ClassEnum.menu;
					vm.imgList = SerialsEnum.serialIndex;
					break;
				case Constant.tutorial.ROCKMANS_SHOW:// 牛人秀
					top = $(".rockmans-show").offset().top;
                    vm.targetTop = top + 36+'px'; // 牛人秀的 title 高 36px
                    vm.tipsTop = top + 36 - 187+'px'; // tips 图片高 187px
                    document.body.scrollTop = 97; // 页面向上滚动一段距离，防止 target 区域无法完全显示
					vm.containerClass = ClassEnum.rockmansShow;
					break;
				case Constant.tutorial.SEARCH:// 搜索
					vm.targetTop = 2+'px';
                    vm.tipsTop = 50+'px';
					document.body.scrollTop = 0; // 页面向上滚动到起点
					vm.containerClass = ClassEnum.search;
					break;
				case Constant.tutorial.JXNG:// 精选牛股
					top = $(".jxng").offset().top;
                    vm.targetTop = top+'px';
                    vm.tipsTop = top + 150+'px';
                    document.body.scrollTop = top - 44;
					vm.containerClass = ClassEnum.jxng;
					break;
				case Constant.tutorial.LHFP:// 老何复盘
					top = $(".lhfp").offset().top;
                    vm.targetTop = top+'px';
                    vm.tipsTop = top - 205+'px'; // tips 区域图片高 205px
                    $(document).scrollTop($(document).height() - $(window).height());
					vm.containerClass = ClassEnum.lhfp;
					break;
				case Constant.tutorial.GAMES_OFFICIAL:// 官方比赛
					top = $(".games-official").offset().top;
                    vm.targetTop = top+'px';
                    vm.tipsTop = top - 225+'px'; // tips 区域图片高 225px
					vm.containerClass = ClassEnum.gamesOfficial;
					break;

				case Constant.tutorial.ROCKMAN_ARROW: // 牛人列表点击展开
					vm.containerClass = ClassEnum.rockmanArrow;
					vm.imgList = SerialsEnum.serialRockman;
					break;
				case Constant.tutorial.ROCKMAN_HEAD:// 牛人点击头指引头像
					top = $(".cattle-person-table-box:first-child").offset().top;
                    vm.targetTop = top - 10+'px';
                    vm.tipsTop = top + 90+'px';
					vm.containerClass = ClassEnum.rockmanHead;
					break;
				case Constant.tutorial.ROCKMAN_TAB:// 切换牛人列表
					top = $(".menubar").offset().top;
                    vm.targetTop = top +'px';
                    vm.tipsTop = top + 70+'px';
					vm.containerClass = ClassEnum.rockmanTab;
					break;

				case Constant.tutorial.ROCKSTOCK_TAB:// 切换牛股列表
					vm.containerClass = ClassEnum.rockStockTab;
					vm.imgList = SerialsEnum.serialRockStock;
					break;
				case Constant.tutorial.ROCKSTOCK_SELFSTOCK:// 添加自选股
					top = $(".self-btn:first-child").offset().top;
                    left = $(".self-btn:first-child").offset().left;
                    vm.targetTop = top - 5+'px';
                    vm.targetLeft = left-5+'px';
                    vm.tipsTop = top + 50+'px';
					vm.containerClass = ClassEnum.rockStockSelfStock;
					break;
				case Constant.tutorial.ROCKSTOCK_FOOTERTAB:// 切换牛股和牛组合
					vm.containerClass = ClassEnum.rockStockFooterTab;
					break;

				case Constant.tutorial.REASON_MORE:// 交易委托更多原因
					setTimeout(() => {
						top = $(".guide-reason-more").offset().top;
	                	vm.targetTop = top - 20 +'px';
	                	vm.tipsTop = top - 190 +'px';
						vm.containerClass = ClassEnum.reasonMore;
						vm.imgList = SerialsEnum.serialReasonMore;
					}, 100)
					
					break;

				case Constant.tutorial.USER_HEAD:// 用户头像
					vm.containerClass = ClassEnum.userHead;
					vm.imgList = SerialsEnum.serialLoginIndex;
					break;
				case Constant.tutorial.MY_TRADE:// 我的交易按钮
					top = $(".btn-simulate-trade").offset().top;
                    vm.targetTop = top - 10+'px';
                    vm.tipsTop = top + 50+'px'; // tips 区域图片高 225px
                    $(document).scrollTop(141); // 页面向上滚动一段距离，防止 tips 区域无法完全显示
					vm.containerClass = ClassEnum.myTrade;
					break;

				case Constant.tutorial.JYB:// 君元宝数
					vm.containerClass = ClassEnum.jyb;
					top = $(".self-details .overview>.two").offset().top;
 					vm.targetTop = top+'px';
					vm.tipsTop = top -75+'px';
					vm.imgList = SerialsEnum.serialMyHome;
					break;
				case Constant.tutorial.MEDALS_OWNED:// 已获取勋章区域
					top = $(".self-details .overview>.two").offset().top;
                    vm.targetTop = top+'px';
                    vm.tipsTop = top + 35+'px';
					vm.containerClass = ClassEnum.medalsOwned;
					break;
				case Constant.tutorial.SETTING_SUBSCRIPTION_PRICE:// 设置订阅价格
					document.body.scrollTop = 99999; // 滚动到页面底部
					top = $(".others .price-sub").offset().top;
                    vm.targetTop = top+'px';
                    vm.tipsTop = top - 160+'px'; // tips 区域图片高
					vm.containerClass = ClassEnum.settingSubscriptionPrice;
					break;
				case Constant.tutorial.RELATED_INFORMATION:// 我的相关信息
					top = $(".others .concern").offset().top;
                    vm.targetTop = top+'px';
                    vm.tipsTop = top - 160+'px'; // tips 区域图片高
					vm.containerClass = ClassEnum.relatedInformation;
					break;

				case Constant.tutorial.INDEX_BUILD_GAME: //比赛：主页面单个比赛
					left = $(".common-app-btn-buildGame").offset().left - 6;
					vm.targetLeft = left+'px';
					vm.targetTop = 0;
					vm.tipsTop = 44+'px';
					vm.containerClass = ClassEnum.indexBuildGame;
					vm.imgList = SerialsEnum.serialGame;
					break;
				case Constant.tutorial.INDEX_GAME_ITEM: //比赛：主页面创建比赛
					let top = $(".game_main .game-wrap .games-items li:first-child").offset().top;
            	 	vm.targetLeft = 0;
                    vm.targetTop = top+'px';
                    vm.tipsTop = top-160+'px';

                    document.body.scrollTop = 150;
					vm.containerClass = ClassEnum.indexGameItem;
					break;
				case Constant.tutorial.INDEX_GAME_FOOTER://比赛：主页面所有比赛和我的比赛区域
					vm.containerClass = ClassEnum.indexGameFooter;
					break;
			}

			let tutorial = LocalDAO.getTutorial()||{};
            tutorial[vm.guideType] = 1;
            LocalDAO.setTutorial(tutorial);
		},
		next(){
			let vm = this,
				top,
				left;

			switch(vm.guideType){
				case Constant.tutorial.MENU: // 主菜单
					vm.guideType = Constant.tutorial.ROCKMANS_SHOW;
					break;
				case Constant.tutorial.ROCKMANS_SHOW:// 牛人秀
					vm.guideType = Constant.tutorial.SEARCH;
					break;
				case Constant.tutorial.SEARCH:// 搜索
					vm.guideType = Constant.tutorial.JXNG;
					break;
				case Constant.tutorial.JXNG:// 精选牛股
					vm.guideType = Constant.tutorial.LHFP;   
					break;
				case Constant.tutorial.LHFP:// 老何复盘
					vm.guideType = Constant.tutorial.GAMES_OFFICIAL;
					break;
				case Constant.tutorial.GAMES_OFFICIAL:// 官方比赛
					document.body.scrollTop = 0;
					vm.visible = false;
					return;

				case Constant.tutorial.ROCKMAN_ARROW: // 牛人列表点击展开
					vm.guideType = Constant.tutorial.ROCKMAN_HEAD;
                    break;
				case Constant.tutorial.ROCKMAN_HEAD:// 牛人点击头指引头像
					vm.guideType = Constant.tutorial.ROCKMAN_TAB;
                    break;
				case Constant.tutorial.ROCKMAN_TAB:// 切换牛人列表
					document.body.scrollTop = 0;
					vm.visible = false;
					return;

				case Constant.tutorial.ROCKSTOCK_TAB:// 切换牛股列表
					vm.guideType = Constant.tutorial.ROCKSTOCK_SELFSTOCK;
                    break;
				case Constant.tutorial.ROCKSTOCK_SELFSTOCK:// 添加自选股
					vm.guideType = Constant.tutorial.ROCKSTOCK_FOOTERTAB;
					break;
				case Constant.tutorial.ROCKSTOCK_FOOTERTAB:// 切换牛股和牛组合
					document.body.scrollTop = 0;
					vm.visible = false;
					return;

				case Constant.tutorial.REASON_MORE:// 交易委托更多原因
					document.body.scrollTop = 0;
					vm.visible = false;
					return;

				case Constant.tutorial.USER_HEAD:// 用户头像
					vm.guideType = Constant.tutorial.MY_TRADE;
                    break;
				case Constant.tutorial.MY_TRADE:// 我的交易按钮
					document.body.scrollTop = 0;
					vm.visible = false;
					return;

				case Constant.tutorial.JYB:// 君元宝数
					vm.guideType = Constant.tutorial.MEDALS_OWNED;
                    break;
				case Constant.tutorial.MEDALS_OWNED:// 已获取勋章区域
					vm.guideType = Constant.tutorial.SETTING_SUBSCRIPTION_PRICE;
					break;
				case Constant.tutorial.SETTING_SUBSCRIPTION_PRICE:// 设置订阅价格
					vm.guideType = Constant.tutorial.RELATED_INFORMATION;
					break;
				case Constant.tutorial.RELATED_INFORMATION:// 我的相关信息
					document.body.scrollTop = 0;
					vm.visible = false;
					return;

				case Constant.tutorial.INDEX_BUILD_GAME: //比赛：主页面单个比赛
					let li = document.querySelector(".game_main .game-wrap .games-items li");
                    if(li){
                    	vm.guideType = Constant.tutorial.INDEX_GAME_ITEM;
                    } else {
                    	vm.guideType = Constant.tutorial.INDEX_GAME_FOOTER;
                    }
                    break;
				case Constant.tutorial.INDEX_GAME_ITEM: //比赛：主页面创建比赛
					vm.guideType = Constant.tutorial.INDEX_GAME_FOOTER;
					break;
				case Constant.tutorial.INDEX_GAME_FOOTER://比赛：主页面所有比赛和我的比赛区域
					document.body.scrollTop = 0;
					vm.visible = false;
					return;
			}

			vm.setGuideInfo();
		},
		visibleCheck(){
		    let vm = this,
		    	showed = true,
		    	tutorial = LocalDAO.getTutorial()||{};

		    switch(vm.guideParam.guideType){
		      case Constant.tutorial.MENU:
		        showed = typeof(tutorial[Constant.tutorial.MENU]) !== "undefined" &&
		                 typeof(tutorial[Constant.tutorial.ROCKMANS_SHOW]) !== "undefined" &&
		                 typeof(tutorial[Constant.tutorial.SEARCH]) !== "undefined" &&
		                 typeof(tutorial[Constant.tutorial.JXNG]) !== "undefined" &&
		                 typeof(tutorial[Constant.tutorial.LHFP]) !== "undefined" &&
		                 typeof(tutorial[Constant.tutorial.GAMES_OFFICIAL]) !== "undefined" ;
		        break;
		      case Constant.tutorial.JYB:
		        showed = typeof(tutorial[Constant.tutorial.JYB]) !== "undefined" &&
		                 typeof(tutorial[Constant.tutorial.MEDALS_OWNED]) !== "undefined" &&
		                 typeof(tutorial[Constant.tutorial.SETTING_SUBSCRIPTION_PRICE]) !== "undefined" &&
		                 typeof(tutorial[Constant.tutorial.RELATED_INFORMATION]) !== "undefined";
		        break;
		      case Constant.tutorial.USER_HEAD:
		        showed = typeof(tutorial[Constant.tutorial.USER_HEAD]) !== "undefined" &&
		                 typeof(tutorial[Constant.tutorial.MY_TRADE]) !== "undefined";
		        break;
		      case Constant.tutorial.INDEX_BUILD_GAME:
		        showed = typeof(tutorial[Constant.tutorial.INDEX_BUILD_GAME]) !== "undefined";
		        break;
		      case Constant.tutorial.ROCKMAN_ARROW:
		        showed = typeof(tutorial[Constant.tutorial.ROCKMAN_ARROW]) !== "undefined" &&
		                 typeof(tutorial[Constant.tutorial.ROCKMAN_HEAD]) !== "undefined" &&
		                 typeof(tutorial[Constant.tutorial.ROCKMAN_TAB]) !== "undefined";
		        break;
		      case Constant.tutorial.ROCKSTOCK_TAB:
		        showed = typeof(tutorial[Constant.tutorial.ROCKSTOCK_TAB]) !== "undefined" &&
		                 typeof(tutorial[Constant.tutorial.ROCKSTOCK_SELFSTOCK]) !== "undefined" &&
		                 typeof(tutorial[Constant.tutorial.ROCKSTOCK_FOOTERTAB]) !== "undefined";
		        break;
		      case Constant.tutorial.REASON_MORE:
		        showed = typeof(tutorial[Constant.tutorial.REASON_MORE]) !== "undefined";
		        break;
		    }

		    if(!showed){
		    	vm.guideType = vm.guideParam.guideType;
		      	vm.visible = true;
		      	vm.setGuideInfo();
		    }
		}
		
	}
}
</script>

<style scoped>
	.tutorial{
		display: block;
	}
</style>